<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: SOAP, List loading</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Vista Style" href="../../style/tree/vista/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Default Style" href="../../style/tree/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .Basis-Tree
    {
      width: 250px;
      height: 300px;
      border: 1px solid #888;
      position: relative;
    }

    .Basis-Tree .loading
    {
      position: absolute;
      top: 2px;
      left: 2px;
      padding: 2px 1ex;
      background: gold;
      font-size: 85%;
      text-align: center;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style_ie.css" media="screen" />
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: SOAP, List loading</h1>
  
  <p id="demo-summary">
    Simple example of Basis.SOAP
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
    // IMPORTANT: Host server must has url proxy for pathes starts with /w1service
    // to http://service.w1.ru/10/
    // So, /w1service/PublicService.asmx should be proxed to 
    // http://services.w1.ru/10/PublicService.asmx

    var demoContainer = basis.dom.get('demo-container');

    // create provider group data type
    var ProviderGroup = new basis.entity.EntityType({
      name: 'ProviderGroup',
      id: 'ProviderGroupId',
      fields: {
        ProviderGroupId: String,
        Title: String,
        ProviderCount: Number,
        ActiveProviderCount: Number
      }
    });

    function getResponseData(){
      return this.getResponseData().GetProviderGroupsResponse.GetProviderGroupsResult;
    }

    // create service and it's method
    var service = new basis.net.soap.Service('/w1service/PublicService.asmx', 'Wallet.Public.WebService');
    var getProviderGroup = service.createMethodCall('GetProviderGroups', {
      mapping: {
        // force converting ProviderGroup element to array in response
        // it make sence only if one ProviderGroup element in response
        ProviderGroup: { forceArray: true }
      },
      body: {
        // method parameters
        CultureId: 'en-US',
      },
      callback: {
        start: function(){ 
          ProviderGroup.all.setState(basis.data.STATE.PROCESSING)
        },
        failure: function(){
          ProviderGroup.all.setState(basis.data.STATE.ERROR)
        },
        success: function(envelopeData){
          // synchonize with current dataset
          ProviderGroup.all.sync((getResponseData.call(this)).ProviderGroup);

          // change dataset state to READY
          ProviderGroup.all.setState(basis.data.STATE.READY)
        }
      }
    }, true);

    // add trigger button
    basis.dom.insert(demoContainer,
      basis.dom.createElement(
        {
          description: 'BUTTON',
          click: function(){
            getProviderGroup.call();
          }
        },
        'Load provider list'
      )
    );

    // create provider group list
    var tree = new basis.ui.tree.Tree({
      container: demoContainer,

      // set source dataset
      dataSource: ProviderGroup.all,

      // make it sensetive to dataset state changes
      delegate: ProviderGroup.all,

      // customize item class
      childClass: {
        binding: {
          title: {
            events: 'update',
            getter: Function.getter('data', '{Title} ({ProviderCount})')
          }
        }
      }
    });

    // add handler for trace state changes
    new basis.ui.label.DataSourceProcessing({
      cssClassName: 'loading',
      content: 'loading...',
      delegate: tree
    });
    
  </script>
</body>

</html>
